<template>
	<view class="index">
		<view class="search">
			<u-search placeholder="请输入您要搜索的内容" v-model="keyword" :showAction="false" bgColor="#f9f9f9"
				searchIconColor="#09092d" @search="getBookList" @clear="getBookList"></u-search>
		</view>
		<view class="container">
			<view class="main">
				<view class="tab">
					<view class="tab-title">人情簿</view>
					<image class="add-icon" src="../../static/image/add.png" mode="aspectFit" @click="addBook"></image>
				</view>
				<scroll-view class="scroll-view" scroll-y>
					<view class="list">
						<u-swipe-action>
							<u-swipe-action-item :options="options" v-for="item,index in booklist" :key="item.id"
								:name="item.id" @click="e => onActionItemClick(e, index)">
								<view class="list-item" @click="toList(item.id)">
									<image class="list-item-img" :src="item.image" mode="aspectFill"></image>
									<view class="list-item-right">
										<view class="header">
											<view class="title">{{item.name}}</view>
											<view class="desc">{{item.remark}}</view>
										</view>
										<view class="footer">
											<view class="price">￥{{item.get_gift_total_money}}</view>
											<view class="nums">{{item.get_gift_total_number}}笔</view>
										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
					<m-empty v-if="!booklist.length" image="../../static/image/empty.png" title="暂无人情簿"
						tip="快去创建您的第一个人情簿吧~" btnText="创建人情簿" @btnClick="addBook"></m-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Giftbook,
		Login
	} from '@/static/utils/service.js'
	import {
		get,
		post
	} from '@/static/utils/request.js'
	import {
		Routes,
		Toast,
		WxBaseApi
	} from '@/static/utils/utils.js'
	export default {
		data() {
			return {
				keyword: '',
				booklist: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF3141'
					}
				}]
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init() {
				this.getBookList()
			},
			//获取礼簿列表
			async getBookList(source) {
				const {
					code,
					data,
					msg
				} = await get(Giftbook.lists, {
					name: this.keyword
				}, '加载中')
				if (code === 1) {
					this.booklist = data.lists
				} else Toast.none(msg)
			},
			addBook() {
				Routes.push('/pages/addBook/addBook', {
					events: {
						'update': () => {
							this.getBookList()
						}
					}
				})
			},
			onActionItemClick(e, i) {
				const {
					index,
					name
				} = e
				if (index == 0) {
					this.onDel(name, i)
				}
			},
			onDel(id, i) {
				wx.showModal({
					title: '删除提示',
					content: '是否确认删除？',
					success: async res => {
						if (res.confirm) {
							const {
								code,
								msg
							} = await post(Giftbook.delete, {
								id
							}, '提交中')
							if (code == 1) {
								Toast.none('删除成功')
								this.booklist.splice(i, 1)
							} else {
								Toast.none(msg)
							}
						}
					}
				})
			},
			toList(id) {
				Routes.push(`/pages/receive/receive?bookId=${id}`)
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	/deep/.u-tabs {
		background-color: #fff;
	}

	.index {
		height: 100%;
		display: flex;
		flex-direction: column;

		.search {
			padding: 30rpx;
			background-color: #fff;
		}

		.container {
			flex: 1;
			padding: 30rpx;
			overflow: hidden;

			.main {
				height: 100%;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				overflow: hidden;

				.tab {
					padding: 25rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.add-icon {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.scroll-view {
					flex: 1;
					overflow: hidden;
					background-color: #fff;

					.emptyImage {
						width: 516rpx !important;
						height: 380rpx !important;
					}

					.list {
						padding: 25rpx;

						.list-item {
							display: flex;
							margin-bottom: 25rpx;

							.list-item-img {
								width: 250rpx;
								height: 180rpx;
								border-radius: 15rpx;
							}

							.list-item-right {
								flex: 1;
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.desc {
									margin-top: 15rpx;
									font-size: 24rpx;
									color: #aaa;
								}

								.footer {
									display: flex;
									align-items: center;
									justify-content: space-between;

									.price {
										color: red;
										font-size: 34rpx;
										font-weight: bold;
									}

									.nums {
										font-size: 24rpx;
										color: #bbb;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>